<template>
	<view class="userdetail">
		<view class="nav-header-box">
			<view class="header-left" @click="goback">
				<view class="header-left-icon"></view>
			</view>
			<view class="header-title">
				<view class="header-p"></view>
			</view>
			<view class="header-right">
				<view class="header-right-icon"></view>
			</view>
		</view>

		<view class="user-info-box">
			<view class="user-info-top">
				<view class="user-img-box">
					<image :src="user_avators" mode=""></image>
				</view>
				<view class="user-right">
					<view class="user-followers">
						<view class="followers-num">{{follwercount}}</view>
						<view class="followers-text">关注</view>
					</view>
					<view class="user-following">
						<view class="following-num">{{fanscount}}</view>
						<view class="following-text">粉丝</view>
					</view>
					<view class="user-news">
						<view class="news-num">0</view>
						<view class="news-text">发布</view>
					</view>
				</view>
			</view>
			<view class="user-info-bottom">
				<view class="user-info-name">
					<view class="user-name">{{user_nick_name}}</view>
				</view>
				<view class="user-info-signature">
					<view class="user-signature">{{user_message!="null"?user_message:'编辑个性，展示我的独特态度。'}}</view>
				</view>
			</view>
		</view>

		<view class="my-list-box">
			<view class="nav-ul-list">
				<view class="nav-li-content" @click="handoff(0)">
					<view class="nav-title">发布的作品</view>
					<text class="underline active"></text>
				</view>
				<!-- <view class="nav-li-content" @click="handoff(1)">
					<view class="nav-title">发布</view>
					<text class="underline" :class="navIndex==1?'active':''"></text>
				</view> -->
			</view>
		</view>
		<view class="section-box">
			<view class="section-list">
				<view class="ul-list">
					<scroll-view scroll-y="true" class="scroll-view-height">
						<view v-if="lookList.length==0">
							<view class="look-null">
								暂时无更多浏览记录
							</view>
						</view>
						<view v-else>
							<block v-for="item in lookList" :key="'l' + item.id">
								<view class="li-list" @touchend.stop.prevent="goDetail(item.id)">
									<view class="left-img">
										<image v-if="/.*thepaper.*/gi.test(item.head_img)"
											:src="`https://images.weserv.nl/?url=${item.head_img}`" mode="aspectFill">
										</image>
										<image v-else :src="`${item.head_img}`" mode="aspectFill"></image>
									</view>
									<view class="content-writing">
										<view class="p-location">{{item.tag}}</view>
										<view class="p-title">{{item.title}}</view>
										<view class="p-come">
											<view class="p-come-left">
												<view class="p-person">
													<text class="person-icon">
														<image :src="item.user_avators" mode="aspectFit"></image>
													</text>
													<text class="person">{{item.media}}</text>
												</view>
												<view class="p-time">{{item.publish_time}}</view>
											</view>
											<view class="p-come-right">
												<!-- <text class="come-right-icon"></text> -->
											</view>
										</view>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		follwerCount,
		fansCount,
		getUser,
		getUserNews
	} from "@/api/request";
	export default {
		data() {
			return {
				navIndex: 0,
				user_avators: "../../static/logo.png",
				user_nick_name: "11",
				user_id: "",
				user_message: "111",
				user_avators: "",
				follwercount: 0,
				fanscount: 0,
				isShow: false,
				lookList: []
			}
		},
		methods: {
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			goFollow(id) {
				uni.navigateTo({
					url: "/pages/follow/follow?type=" + id
				})
			},
			getUserInfo(user_id) {
				let data = {
					user_id,
				};
				getUser(data).then(content => {
					// console.log(content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.user_id = data[0].user_id
						// this.userInfo = data[0]
						this.user_nick_name = data[0].user_nick_name == null ? '' : data[0].user_nick_name
						// this.useremail = data[0].user_email == null ? '' : data[0].user_email;
						// this.userphone = data[0].user_phone == null ? '' : data[0].user_phone;
						this.user_message = data[0].user_message == null ? '' : data[0].user_message;
						this.user_avators = data[0].user_avators
						// console.log(this.user_message);
						// console.log(this.userInfo); 
					}
				})
			},
			//去详情页
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/detail/detail?id=" + id
				})
			},
			getFollwerCount(user_id) {
				let data = {
					user_id
				};
				follwerCount(data).then(content => {
					// console.log("1111",content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.follwercount = data[0]["COUNT(*)"]
					}
				}).catch(err => {
					console.log("1112", err);
				})
			},
			getFansCount(follow_user) {
				let data = {
					follow_user,
				};
				fansCount(data).then(content => {
					// console.log("2222",content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.fanscount = data[0]["COUNT(*)"]
					}
				}).catch(err => {
					console.log("2221", err);
				})
			},
			getUserNewsList(user_id) {
				let data = {
					user_id
				}
				getUserNews(data).then(content => {
					// console.log("1111", content);
					let {
						code,
						data
					} = content
					if (code == 200) {
						this.lookList = data
					}
				})
			}
		},
		onLoad(e) {
			// console.log(e);
			this.getFollwerCount(e.id);
			this.getFansCount(e.id);
			this.getUserInfo(e.id);
			this.getUserNewsList(e.id)
			// this.getMyLook();
		},
		onShow() {
			// this.user_avators = localStorage.getItem("user_avators");
			// this.user_nick_name = localStorage.getItem("user_nick_name");
			// this.user_id = localStorage.getItem("user_id");
			// this.user_message = localStorage.getItem("user_message");

		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	.userdetail {
		width: 100%;
		padding: 0 30rpx;
	}

	.nav-header-box {
		// border: 1px solid #000;
		padding: 30rpx 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 48rpx;

		.header-title {
			font-size: 32rpx;
			font-weight: bold;

		}

		.header-left,
		.header-right {
			width: 48rpx;
			height: 48rpx;
			background-repeat: no-repeat;
			background-size: 100%;
		}

		.header-left {
			background-image: url("@/static/image/back.png");
		}

		.header-right {
			background-image: url("@/static/image/more2.png");
		}
	}

	.user-info-box {
		width: 100%;

		.user-info-top {
			width: 100%;
			display: flex;

			.user-img-box {
				width: 200rpx;
				height: 200rpx;

				image {
					border: 1px solid #999;
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}

			.user-right {
				width: calc(100% - 200rpx);
				padding-left: 20rpx;
				display: flex;
				align-items: center;
				// justify-content: space-between;
			}

			.user-followers,
			.user-following,
			.user-news {
				text-align: center;
				width: 33.33%;
				padding: 0 20rpx;

				.followers-num,
				.following-num,
				.news-num {
					font-size: 30rpx;
					color: #000;
					font-weight: bold;
				}

				.followers-text,
				.following-text,
				.news-text {
					padding-top: 10rpx;
					font-size: 30rpx;
				}
			}
		}

		.user-info-bottom {
			padding: 10rpx 0;
			width: 100%;

			.user-info-name {
				padding-bottom: 10rpx;
				font-size: 32rpx;
				color: #000;
				font-weight: bold;

				.user-name {
					width: 200rpx;
					text-align: center;
				}
			}

			.user-info-signature {
				// border: 1px solid #000;
				height: 96rpx;
				font-size: 28rpx;
				color: #4E4B66;
			}
		}
	}

	.nav-ul-list {
		padding: 30rpx 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.nav-li-content {
			padding: 0 30rpx;

			.nav-title {
				font-size: 32rpx;
				color: #4E4B66;
				padding-bottom: 10rpx;
			}

			.underline {
				margin: 0 auto;
				display: block;
				width: 60rpx;
				height: 4rpx;
				background-color: transparent;
				transition: width 0.3s;

				&.active {
					width: 100rpx;
					background-color: #1877F2;
				}
			}
		}


	}

	.section-box {
		width: 100%;

		.section-content {
			width: 100%;
			padding: 32rpx;
		}

		.content-img-box {
			padding: 10rpx;
			width: 100%;
			height: 366rpx;

			image {
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
		}

		.content-writing {
			width: 100%;

			.p-location {
				font-size: 28rpx;
				color: $uni-text-color-grey;
			}

			.p-title {
				padding: 15rpx 0 10rpx 0;
				font-size: 32rpx;
				color: #000;
			}

			.p-come {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.p-come-left {
				display: flex;
				align-items: flex-end;
			}

			.p-person {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}


			.person-icon {
				display: block;
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 5rpx;

				image {
					border-radius: 50%;
					border: 1px solid #f0f0f0;
					width: 100%;
					height: 100%;
				}
			}

			.person {
				padding-left: 5rpx;
				font-size: 28rpx;
				color: #4e4b46;
				font-weight: bold;
			}

			.p-time {
				padding-left: 5rpx;
				font-size: 24rpx;
				color: $uni-text-color-grey;
			}

			.p-come-right {
				width: 40rpx;
				height: 40rpx;
				background-image: url("@/static/image/more.png");
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}
	}

	.section-list {
		// border: 1px solid #000;
		// margin-top: 30rpx;
		width: 100%;
		// height: 500rpx;

		.scroll-view-height {
			height: calc(100vh - 700rpx);
		}

		.look-null {
			padding: 30rpx 0;
			text-align: center;
			font-size: 32rpx;
			color: #999;
		}

		.li-list {
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.detele-look {
				z-index: 999;
				position: absolute;
				top: 0;
				right: 0;
				// background-color: #000;
				background-image: url("@/static/image/detele.png");
				background-repeat: no-repeat;
				background-size: 100%;
				width: 40rpx;
				height: 40rpx;
			}

			.left-img {
				width: 192rpx;
				height: 192rpx;

				image {
					border-radius: 10rpx;
					width: 100%;
					height: 100%;
				}
			}

			.content-writing {
				flex: 1;
				padding: 0 10rpx;

				.p-title {

					height: 106rpx;
					overflow: hidden;
					// text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					display: -webkit-box;
				}
			}
		}
	}
</style>